<template>
	<view>
		<uv-index-list :index-list="indexList" customNavHeight="88rpx">
			<!-- <template v-slot:header>
				<view style="height: 100rpx;width: 750rpx;background-color: #3c9cff;">头部内容</view>
			</template> -->
			<!-- <template v-for="(item, index) in brandList" :key="index">
				<uv-index-item>
					<view class="list-cell" v-for="(cell, index) in item" :key="index">
						{{cell.name}}
					</view>
				</uv-index-item>
			</template> -->
			<template v-for="(brand, index) in brandList" :key="index">
				<uv-index-item>
					<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
					<view class="brand-list" v-for="(item, index1) in brand" :key="item.brandID">
						<view class="brand-list__item" @click="openModelList(item)">
							<image class="brand-list__item__image" :src="item.icon"></image>
							<text class="brand-list__item__name">{{item.name}}</text>
						</view>
						<uv-line></uv-line>
					</view>
				</uv-index-item>
			</template>

		</uv-index-list>

		<!-- 车系列表侧滑 -->
		<uv-popup ref="model" mode="right" :overlay="false" :closeOnClickOverlay="false" bgColor="none"
			:custom-style="modelListStyle">
			<!-- 顶部 -->
			<view class="model-title-icon">
				<view class="model-title-box">
					<uv-image :src="currentBrand.icon" mode="aspectFit" width="80rpx" height="80rpx"></uv-image>
					<text class="title-text">{{currentBrand.name}}</text>
				</view>
				<uv-icon class="uv-icon" name="close" @click="closeModelList" size="30rpx"></uv-icon>
			</view>
			<!-- 列表 -->
			<scroll-view scroll-y="true" class="scroll-Y">
				<view>
					<uv-list>
						<uv-list-item show-arrow border v-for="(model,index) in currentModelList" :key="model.modelID">
							<template v-slot="header">
								<view class="model-list-box" @click="clickModel(model)">
									<uv-image :src="model.icon" mode="aspectFit" width="80rpx"
										height="80rpx"></uv-image>
									<text class="name-text">{{model.name}}</text>
								</view>
							</template>
						</uv-list-item>
						<view class="model-list-bottom"></view>
					</uv-list>
				</view>
			</scroll-view>
		</uv-popup>

	</view>
</template>

<script>
	const db = uniCloud.database();
	const cmd = db.command;
	export default {
		data() {
			return {
				modelListStyle: {
					width: '66vw',
					borderTopLeftRadius: '20rpx',
					backgroundColor: '#ffffff',
					boxShadow: '-5px 0px 10px rgba(0, 0, 0, 0.3)'
				},
				indexList: ["A",
					"B",
					"C",
					"D",
					"E",
					"F",
					"G",
					"H",
					"I",
					"J",
					"K",
					"L",
					"M",
					"N",
					"O",
					"P",
					"Q",
					"R",
					"S",
					"T",
					"U",
					"V",
					"W",
					"X",
					"Y",
					"Z"
				],
				itemArr: [
					['列表A1', '列表A2', '列表A3'],
					['列表B1', '列表B2', '列表B3'],
					['列表C1', '列表C2', '列表C3'],
					['列表D1', '列表D2', '列表D3'],
					['列表E1', '列表E2', '列表E3'],
					['列表F1', '列表F2', '列表F3'],
					['列表G1', '列表G2', '列表G3']
				],
				brandList: [], //初始及处理过的品牌数组
				actBrandList: [], //已使用的品牌数据，分第一次和第二次并入
				currentBrand: {}, //当前选中品牌
				localeModel: {}, //每次调取车系数据后，保存在此对象中，品牌ID为键，值为所属车系的数组，列表时，先查看此变量中是否存在
				currentModelList: []
			}
		},
		onLoad() {
			this.getBrandData()
		},
		methods: {
			async getBrandData() {
				await db.collection('wjf-brand').where({
					status: true
				}).field('b_name["zh-Hans"] as name,icon,brandID,group').get().then(res => {
					console.log('读取品牌数据库', res.result.data);
					this.brandList.length = 0; //清空数组

					// 品牌分组
					for (let i = 0; i < this.indexList.length; i++) {
						this.brandList.push(res.result.data.filter(item => item.group == this.indexList[i]))
					}

					// this.actBrandList = this.brandList.splice(0, 2)
					// this.actBrandList = this.brandList
					// console.log(this.actBrandList);
					// console.log(this.brandList);
					// this.getModelData()
				})
			},
			// 车系数据采用现读的方法，用到哪个现读哪个
			async getModelData(brandID) {
				await db.collection('wjf-model').where({
					status: true,
					brandID
				}).field("m_name['zh-Hans'] as name,icon,brandID,modelID").get().then(res => {
					this.currentModelList = res.result.data
					this.localeModel[brandID] = res.result.data
					// console.log('读取车系数据库', res.result.data);
				})
			},
			openModelList(brand) {
				// 先检查是否已保存过该品牌的车系，没有再读取
				this.currentBrand = brand
				if (this.localeModel.hasOwnProperty(brand.brandID)) {
					this.currentModelList = this.localeModel[brand.brandID]
				} else {
					this.getModelData(brand.brandID)
				}
				this.$refs.model.open()
			},
			clickModel(model){
				console.log(model);
				this.closeModelList()
				uni.navigateBack({
					delta: 1
				});
			},
			closeModelList() {
				this.$refs.model.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		/* #ifndef APP-PLUS */
		display: flex;
		box-sizing: border-box;
		width: 100%;
		/* #endif */
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.brand-list {

		&__item {
			// @include flex;
			display: flex;
			padding: 6px 12px;
			align-items: center;
			width: 75%;
			// background-color: palegreen;

			&__image {
				height: 80rpx;
				width: 80rpx;
				border-radius: 6rpx;
			}

			&__name {
				font-size: 28rpx;
				margin-left: 20rpx;

				line-height: 30rpx;
				color: #555;

			}
		}

	}

	// 车系弹窗
	.model-title-icon {
		/* #ifdef APP-PLUS */
		margin-top: var(--status-bar-height);
		/* #endif */
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: center;
		height: 100rpx;
		width: 100%;
		border-bottom: 1rpx solid #ddd;

		.model-title-box {
			width: 95vw;
			padding: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.title-text {
				color: #555;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
		}

		.uv-icon {
			padding-right: 30rpx;
		}
	}

	.model-list-box {
		height: 90rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.name-text {
			margin-left: 10rpx;
			width: 70%;
			font-size: 26rpx;
			color: #555;
		}
	}

	.model-list-bottom {
		border-top: 1px solid #eee;
		height: 50rpx;
		// background-color: limegreen;
	}
	
	.scroll-Y {
		/* #ifdef H5 */
		height: calc(100vh - 104rpx - 52px - 0px);
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--status-bar-height) - 84rpx - 0px);
		/* #endif */
	}
</style>